<template>
	<view class="wrap ldt-bg">
    <u-gap height="80"></u-gap>
    <qiunTitleBar title="健康信息申报"/>
		<view class="head-form-bg">
      <u--form :model="form" ref="form" :rules="rules" :errorType="errorType" label-width="200rpx" borderBottom>
        <u-form-item required borderBottom label="姓名" prop="username"><u--input v-model="form.username" border="none"/></u-form-item>
        <u-form-item required borderBottom label="证件类型" prop="cardType"><u--input v-model="form.cardType" border="none"/></u-form-item>
        <u-form-item required borderBottom label="证件号" prop="cardId"><u--input v-model="form.cardId" border="none"/></u-form-item>
        <u-form-item required borderBottom label="联系电话" prop="phone"><u--input v-model="form.phone" border="none"/></u-form-item>
        <u-form-item required borderBottom label="来院人员" prop="userType">
          <u-radio-group v-model="form.userType">
            <u-radio :name="1" label="患者"/>
            <u-radio :name="2" label="家属"/>
            <u-radio :name="3" label="其他"/>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="现住地区" required borderBottom><u--input type="select" :select-open="true" v-model="form.region" placeholder="请选择地区" @click="pickerShow = true" border="none"></u--input></u-form-item>
        <u-form-item label="街道、乡镇地址" borderBottom><u--input v-model="form.regionDetail" type="text" border="none" /></u-form-item>
      </u--form>
		</view>

    <qiunTitleBar title="流行病学史"/>
	  <view class="body-form-bg">
      <u-gap height="40"></u-gap>
      <u-button type="primary" shape="circle" plain style="width: 100%;" @click="allNoHandle">全部为否</u-button>
      <u-gap height="10"></u-gap>
      <u--form :model="form" ref="uForm" :rules="rules" labelPosition="top">
        <u-form-item :label="template.question" v-for="(template,index1) in temaplateList" :key="index1" labelWidth="100%" required>
          <!-- <u--text type="info" align="center" :text="template.question"></u--text> -->
          <u-radio-group v-model="template.options">
            <u-radio v-for="(item, index) in radioList" :key="index" :label="item.name" :name="item.value" :disabled="item.disabled"/>
          </u-radio-group>
        </u-form-item>
      </u--form>
    </view>
    <view class="agreement">
      <u-checkbox-group><u-checkbox  @change="checkboxChange"></u-checkbox></u-checkbox-group>
      <u--text color="#FFFFFF" text="勾选代表同意" class="agreement-text"></u--text>
    </view>
    <u-button type="primary" shape="circle" plain @click="submit()">提交</u-button>
    <u-gap height="40"></u-gap>
    <u-picker :show="pickerShow" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler" @confirm="regionConfirm"></u-picker>
    <u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
  import qiunTitleBar from '@/components/qiun-title-bar'
  import { ldtList,ldtForm } from '@/api/component'
  export default {
    components: {
      qiunTitleBar
    },
    data() {
      return {
        form: {username: ''},
        pickerShow: false,
        temaplateList: [],
        radioList: [
          {name: '是',value: 1,disabled: false},
          {name: '否',value: 0,disabled: false}
        ],
        errorType: 'none',
        rules: {
          'username': {type: 'string',required: true,message: '请填写姓名'},
          'cardType': {type: 'number',required: true,message: '请填写证件类型'},
          'cardId': {type: 'string',required: true,message: '请填写证件号'},
          'phone': {type: 'string',required: true,message: '请填写联系电话'},
          'userType': {type: 'number',required: true,message: '请填写来院人员'}
        },
        loading: false,
        columns: [
          ['中国', '美国'],
          ['深圳', '厦门', '上海', '拉萨']
        ],
        columnData: [
          ['深圳', '厦门', '上海', '拉萨'],
          ['得州', '华盛顿', '纽约', '阿拉斯加']
        ],
        agreement: [],
        radio: ''
      }
    },

    created(){
      this.form = {username: '花无缺',cardType: 1,cardId: '10************11',phone: '180****1234',visitType: 2,region: '北京市海淀区',regionDetail: '中关村A001'}
      ldtList({custom: { auth: true,toast: false }}).then(res => {
        this.temaplateList = res.data
      })
    },
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      change(index) {
        this.current = index;
      },
      navTo(url) {
        uni.navigateTo({	url: url	});
      },
      // 选择地区回调
      // regionConfirm(e) {
      // 	this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
      // },
      changeHandler(e) {
          const {  columnIndex,  value,
              values, // values为当前变化列的数组内容
              index,
    // 微信小程序无法将picker实例传出来，只能通过ref操作
              picker = this.$refs.uPicker
          } = e
          // 当第一列值发生变化时，变化第二列(后一列)对应的选项
          if (columnIndex === 0) {
              // picker为选择器this实例，变化第二列对应的选项
              picker.setColumnValues(1, this.columnData[index])
          }
      },
      // 回调参数为包含columnIndex、value、values
      regionConfirm(e) {
        console.log('confirm', e)
        this.pickerShow = false
      },
      // 全部为否
      allNoHandle(){
        for(var item of this.temaplateList){
          item.options = 0
        }
      },
      // 勾选版权协议
      checkboxChange(e) {
        this.form.agreement = e.value;
      },
      // 保存数据
      submit(){
       let wxLdtFormList =  this.temaplateList.map((item) => { return {questionid: item.id,answer: item.options}})
        this.$refs.form.validate().then(res => {
          this.$refs.uToast.show({	type: 'success',	title: '提交成功',message: this.form,	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'	})
          ldtForm({wxLdtRecord: this.form,wxLdtFormList: wxLdtFormList,testName: 'ddddd'},{custom: { auth: true,toast: false }}).then(response => {

          })
        }).catch(errors => {
          console.log(errors)
          uni.$u.toast('校验失败 - '+errors[0].message)
        })
      }
    }

  }
</script>

<style lang="scss" scoped>
  @import 'index.scss';
  page {
    background-color: $u-f-pg-bg-color;
  }
  .ldt-bg{
    background-color: $u-primary;
    .head-form-bg{
      // 上 右 下 左
      padding: 0 20px 0 20px;
      // margin: 0 10px 0 10px;
      background-color:  $u-f-main-color;
      border-radius: 10px;
    }
    .body-form-bg{
      padding: 0 20px 0 20px;
      // margin: 0 10px 0 10px;
      background-color:  $u-f-main-color;
      border-radius: 10px;

    }
  }
  .agreement {
    display: flex;
    align-items: center;
    margin: 10px;
    .agreement-text {
      padding-left: 8rpx;
      color: $u-primary-light;
    }
  }
</style>
